<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>单元-学生</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
    body {
        background: rgba(90, 194, 255, 1);
    }

    .wrapper {
        padding: 0 15px;
        background-image: url("../../image/course/bg.png");
        background-size: 100%;
    }

    .title {
        padding-top: 29px;
    }

    .title .txt {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }

    .title img {
        width: 6px;
        height: 6px;
        margin: 0 10px;
    }

    .score {
        margin-top: 17px;
        height: 50px;
    }

    .score .txt {
        font-size: 50px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }

    .list {
        margin-top: 18px;
        padding: 0 11px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
        border-radius: 10px;
    }

    .list .item {
        height: 50px;
        border-bottom: 1px solid rgb(214, 214, 214);
    }

    .list .item:last-of-type {
        border-bottom: 0;
    }

    .list .item .txt {
        font-size: 15px;
        font-weight: 400;
        color: rgba(25, 25, 25, 1);
    }

    .list .item img {
        width: 17px;
        height: 18px;
    }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="wrapper">
            <div class="head" data-flex>
                <div class="item" data-flex-box="1">
                    <div class="title" data-flex="main:center cross:center">
                        <img src="../../image/course/rect.png" alt="">
                        <div class="txt">班级平均分</div>
                        <img src="../../image/course/rect.png" alt="">
                    </div>
                    <div class="score" data-flex="main:center cross:center">
                        <div class="txt">81</div>
                    </div>
                </div>
                <div class="item" data-flex-box="1">
                    <div class="title" data-flex="main:center cross:center">
                        <img src="../../image/course/rect.png" alt="">
                        <div class="txt">班级平均分</div>
                        <img src="../../image/course/rect.png" alt="">
                    </div>
                    <div class="score" data-flex="main:center cross:center">
                        <div class="txt">81</div>
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="item" data-flex="cross:center main:justify">
                    <div class="txt">第一学期</div>
                    <img src="../../image/course/arrow3.png" alt="">
                </div>
                <div class="item" data-flex="cross:center main:justify">
                    <div class="txt">第二学期</div>
                    <img src="../../image/course/arrow3.png" alt="">
                </div>
                <div class="item" data-flex="cross:center main:justify">
                    <div class="txt">第三学期</div>
                    <img src="../../image/course/arrow3.png" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
// html 的引号一律为双引号(""),js 为单引号('')
var USER, $S, vm;
apiready = function() {
    $S = SERVICE();
    USER = USER();
    console.log(JSON.stringify(api.pageParam) + '=====pageParam');

    fnInit();
};

// 初始化
function fnInit() {
    vm = new Vue({
        el: '.vueApp',
        data: {
            info: null,
            listData: [],
            pageNo: 1,
            pageSize: 10
        }
    });
    getPageData();
}

function load() {
    getPageData('load');
    fnAddHeaderRefreshingEvent(function() { //设置下拉刷新
        getPageData('headerRefreshing');
    });

    fnAddFooterLoadingEvent(function() { // 设置上拉加载
        getPageData('load');
    });

}

// 获取页面数据
function getPageData(sign) {
    if (sign == 'headerRefreshing') {
        vm.pageNo = 1;
    } else {
        vm.pageNo++;
    }
    var url = '';
    var params = {};
    var callback = function(data) {
        if (vm.pageNo == '1') {
            vm.listData = [];
        }
        var listData = data.listData;
        for (var i = 0; i < listData.length; i++) {
            var item = listData[i];

        }
        vm.listData = vm.listData.concat(data.listData);
        // status 为200时,只返回data
    };
    var error = function(res) {
        // status 不是200时,全部返回
        api.refreshHeaderLoadDone();
    };
    POST(url, params, callback, error);
}

// 点击item
function handleItem(item) {

}
</script>

</html>